<template>
  <view :class="['word-wrapper', props.showUnderLine ? 'mb15' : '', props.showActive ? 'active-word' : '']"
    :style="{ color: handleSetTextColor(props.word) }">
    <view class="word-desc" v-if="props.showScore && props.word.type === 1">{{ props.word.score }}</view>
    <view :class="['word-label', props.showUnderLine && props.word.stressscore === 1 ? 'stressscore' : '']">
      {{ props.word.lab }}
    </view>
  </view>
  <template v-if="props.word.have_space === 1"> &nbsp;</template>
</template>

<script setup lang="ts">
type TWord = {
  score: number;
  lab: string;
  type: number;
  have_space: number;
  [x: string]: any;
};

interface IProps {
  word: TWord;
  showScore: boolean;
  showUnderLine: boolean;
  showActive: boolean;
}

const props = withDefaults(defineProps<IProps>(), {
  word: Object,
  showScore: true,
  showUnderLine: true,
  showActive: false,
});

// 0-40分 #DE4235 41-59分#FFAF00 60-79分#7EB6E6 80-100分 #B0BD3B
const handleSetTextColor = (word: TWord) => {
  if (props.word.type === 2) {
    return "#7C2D10";
  }

  if (word.score >= 0 && word.score <= 40) {
    return "#DE4235";
  } else if (word.score >= 41 && word.score <= 59) {
    return "#FFAF00";
  } else if (word.score >= 60 && word.score <= 79) {
    return "#7EB6E6";
  } else if (word.score >= 80 && word.score <= 100) {
    return "#B0BD3B";
  }
};
</script>

<style scoped lang="scss">
.word-wrapper {
  display: inline-block;
  text-align: center;

  .word-desc {
    font-size: 1.2rem;
    font-family: baloo;
  }

  .word-label {
    font-size: 1.7rem;
    font-family: xiaolai;
  }

  .stressscore {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: -0.4rem;
      left: 0;
      right: 0;
      height: 1px;
      background-color: currentColor;
    }
  }
}

.mb15 {
  margin-bottom: 1.5rem;
}

.active-word {
  background-color: #ffebca;
}
</style>
